[JavaScript 实例] 导航栏几种常见样式 |
您所在的位置：网站首页 › 110 index › [JavaScript 实例] 导航栏几种常见样式 |
|
这里记录下导航栏几种常见的样式，仅供大家参考。 导航栏1 （原生 JS 代码）比较常见也比较简单的导航栏 ，用的 JavaScript 原生代码，大致思路是通过改变 li 元素的 className 实现鼠标移动切换 tab 时改变其背景色及文字颜色，同时切换显示 tab 对应内容。 nav-1.gif 导航栏1-JS原生版 * { margin: 0; padding: 0; } body { font: 12px/2 "Courier New"; } #header { width: 550px; height: 200px; margin: 20px auto; border: 1px solid #e1e1e1; } #nav { list-style-type: none; } #nav li { width: 110px; height: 35px; background: #fff; float: left; color: #000; text-align: center; line-height: 35px; cursor: pointer; border-bottom: 1px solid #e1e1e1; font-weight: bold; } #nav li.active { background: #11ac63; color: #fff; } #content { padding: 50px 30px; } #content ul { display: none; } #content .list { display: block; } window.onload = function() { var aLi = document.getElementById("nav").getElementsByTagName("li"); var oUl = document.getElementById("content").getElementsByTagName("ul"); var i = 0; for (i = 0; i < aLi.length; i++) { aLi[i].index = i; aLi[i].onmouseover = function() { for (var x in aLi) { aLi[x].className = ""; oUl[x].className = ""; } this.className = "active"; oUl[this.index].className = "list"; }; aLi[i].onmouseout = function() { this.className = ""; aLi[this.index].className = "active"; }; } }; 华为 苹果 小米 三星 一加 华为 Mate20 华为 P20 华为荣耀 10 iPhone XS iPhone XS MAX iPhone 8 小米 8 小米 8 SE 小米 Play 三星 Note 9 三星 S9 + 三星 A8s 一加手机 6 一加手机 6T 一加手机 5T 导航栏1（jQuery 代码）还是第一种导航栏样式，通过 jQuery 实现，思路不变。 导航栏2 * { margin: 0; padding: 0; } body { font: 12px/2 "Courier New"; } #header { width: 550px; height: 200px; margin: 20px auto; border: 1px solid #e1e1e1; } #nav { list-style-type: none; } #nav li { width: 110px; height: 35px; background: #fff; float: left; color: #000; text-align: center; line-height: 35px; cursor: pointer; border-bottom: 1px solid #e1e1e1; font-weight: bold; transition: 0.5s; } #nav li.active { background: #fff; color: #11ac63; } #content { padding: 50px 30px; } #content ul { display: none; } #content .list { display: block; } $(function() { $("#nav li").each(function(index) { $(this).mouseover(function() { $("#nav .active").removeClass("active"); $("#content .list").removeClass("list"); $(this).addClass("active"); $("#content ul:eq(" + index + ")").addClass("list"); }); }); }); 华为 苹果 小米 三星 一加 华为 Mate20 华为 P20 华为荣耀 10 iPhone XS iPhone XS MAX iPhone 8 小米 8 小米 8 SE 小米 Play 三星 Note 9 三星 S9 + 三星 A8s 一加手机 6 一加手机 6T 一加手机 5T 导航栏2使用 jQuery 代码，思路与第一种一样，通过改变 li 元素的 className 实现，只是不改变 tab 的背景色而只改变字体颜色，也是比较常见的导航栏样式之一。为了更好的显示效果，顺便给切换标签时字体颜色的改变加了渐变效果。 nav-2.gif 导航栏2 * { margin: 0; padding: 0; } body { font: 12px/2 "Courier New"; } #header { width: 550px; height: 200px; margin: 20px auto; border: 1px solid #e1e1e1; } #nav { list-style-type: none; } #nav li { width: 110px; height: 35px; background: #fff; float: left; color: #000; text-align: center; line-height: 35px; cursor: pointer; border-bottom: 1px solid #e1e1e1; font-weight: bold; transition: 0.5s; } #nav li.active { color: #11ac63; } #content { padding: 50px 30px; } #content ul { display: none; } #content .list { display: block; } $(function() { $("#nav li").each(function(index) { $(this).mouseover(function() { $("#nav .active").removeClass("active"); $("#content .list").removeClass("list"); $(this).addClass("active"); $("#content ul:eq(" + index + ")").addClass("list"); }); }); }); 华为 苹果 小米 三星 一加 华为 Mate20 华为 P20 华为荣耀 10 iPhone XS iPhone XS MAX iPhone 8 小米 8 小米 8 SE 小米 Play 三星 Note 9 三星 S9 + 三星 A8s 一加手机 6 一加手机 6T 一加手机 5T 导航栏3使用 jQuery 代码，鼠标移动切换标签时 tab 背景色会通过滑动的方式切换至目标位置。实现思路是在之前导航栏样式基础上多加了个 li 标签，指定该 li 元素的定位类型为 absolute，同时还需设置其父元素为 relative 定位。然后在 JS 代码中修改上述 li 标签的 left 属性值，并且指定其文本内容（可获取当前 tab 的文本内容）。当然，最重要的是给该 li 标签添加过渡属性，否则 tab 切换就没有滑动效果了。 nav-3.gif 导航栏3 * { margin: 0; padding: 0; } body { font: 12px/2 "Courier New"; } #header { width: 550px; height: 200px; margin: 20px auto; border: 1px solid #e1e1e1; } #nav { list-style-type: none; position: relative; } #nav li { width: 110px; height: 35px; background: #fff; float: left; color: #000; text-align: center; line-height: 35px; cursor: pointer; border-bottom: 1px solid #e1e1e1; font-weight: bold; } #nav li.active { position: absolute; background: #11ac63; color: #fff; left: 0; transition: 0.5s; } #content { padding: 50px 30px; } #content ul { display: none; } #content .list { display: block; } $(function() { $(".tab").hover(function() { var index = $(".tab").index(this); $(".active").css("left", 110 * index + "px"); setTimeout(function() { $(".active").html($(".tab:eq(" + index + ")").html()); }, 250); $("#content .list").removeClass("list"); $("#content ul:eq(" + index + ")").addClass("list"); }); }); 华为 华为 苹果 小米 三星 一加 华为 Mate20 华为 P20 华为荣耀 10 iPhone XS iPhone XS MAX iPhone 8 小米 8 小米 8 SE 小米 Play 三星 Note 9 三星 S9 + 三星 A8s 一加手机 6 一加手机 6T 一加手机 5T 导航栏4使用 jQuery 代码，与上一种导航栏样式实现思路大致相同，只是把新添加的 li 更换为 div，同样设置好该 div 及其父元素的定位类型，并根据 tab 的高度自行调整 div 的高度及 top 属性值。除了该 div 无需设置文本内容外，还加入了 tab 切换时改变字体颜色，其他部分则上一种样式基本一致。 nav-4.gif 导航栏4 * { margin: 0; padding: 0; } body { font: 12px/2 "Courier New"; } #header { width: 550px; height: 200px; margin: 20px auto; border: 1px solid #e1e1e1; } #nav { list-style-type: none; position: relative; } #nav li { width: 110px; height: 35px; background: #fff; float: left; color: #000; text-align: center; line-height: 35px; cursor: pointer; border-bottom: 1px solid #e1e1e1; font-weight: bold; } #nav .active { position: absolute; background: #11ac63; color: #fff; top: 32px; left: 0; transition: 0.5s; width: 110px; height: 3px; text-align: center; } #content { padding: 50px 30px; } #content ul { display: none; } #content .list { display: block; } #nav .tab { color: #11ac63; transition: 0.5s; } $(function() { $("#nav li").hover(function() { var index = $("#nav li").index(this); $(".active").css("left", 110 * index + "px"); $("#nav .tab").removeClass("tab"); $(this).addClass("tab"); $("#content .list").removeClass("list"); $("#content ul:eq(" + index + ")").addClass("list"); }); }); 华为 苹果 小米 三星 一加 华为 Mate20 华为 P20 华为荣耀 10 iPhone XS iPhone XS MAX iPhone 8 小米 8 小米 8 SE 小米 Play 三星 Note 9 三星 S9 + 三星 A8s 一加手机 6 一加手机 6T 一加手机 5T |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |